<template>
  <div id="itemPanel" ref="itemPanel" :class="{'hidden': itemVisible}">
    <i class="iconfont icon-h-drag"></i>
    <div class="icon-tool">
      <i draggable="true" data-type="node" data-shape="circle-node" class="iconfont icon-circle"></i>
      <i draggable="true" data-type="node" data-shape="rect-node" class="iconfont icon-rect"></i>
      <i draggable="true" data-type="node" data-shape="ellipse-node" class="iconfont icon-ellipse"></i>
      <i draggable="true" data-type="node" data-shape="diamond-node" class="iconfont icon-diamond"></i>
      <i draggable="true" data-type="node" data-shape="modelRect-node" class="iconfont icon-model-rect"></i>
      <i class="split"></i>
      <i draggable="true" class="gb-toggle-btn" @click="itemVisible = !itemVisible"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ItemPanel',
  props: {
    graph: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      itemVisible: false
    }
  },
  mounted () {
    const icons = [...this.$refs.itemPanel.querySelector('.icon-tool').querySelectorAll('.iconfont')]

    icons.forEach(icon => {
      // 拖拽结束
      icon.addEventListener('click', e => {
        this.$emit(`canvas-add-${e.target.dataset.type}`, e)
      })
      icon.addEventListener('dragend', e => {
        this.$emit(`canvas-add-${e.target.dataset.type}`, e)
      })
    })

    // 阻止默认动作
    document.addEventListener('drop', e => {
      e.preventDefault()
    }, false)
  },
  methods: {
    addEdge ($event) {

    }
  }
}
</script>
